<div class="main_content ctrl white_design">
    <config-tab></config-tab>
    <div class="tab-content">
        <h2 i18n="@@control.archive_control">Archive Control</h2>
        <div class="dynamic_table j4care-table">
            <div class="table_header">
                <div class="tr">
                    <div class="th" *ngFor="let table of tableSchema" [ngStyle]="{width: table.calculatedWidth}" [innerHtml]="table.title"></div>
                </div>
            </div>
            <div class="table_body">
                <div class="tr" *ngFor="let key of Object.keys(devices)">
                    <div class="td" *ngFor="let table of tableSchema" [ngStyle]="{width: table.calculatedWidth}">
                        <ng-container *ngIf="table.code === 'actions'">
                            <div class="action_list">
                                <div (click)="toggleState(devices[key])" [ngClass]="{'running':devices[key].status === 'STARTED','not-running':devices[key].status === 'STOPPED'}" class="pointer action_button glyphicon glyphicon-off"></div>
                                <div i18n-title="@@title.control.reload_archive" title="Reload archive" (click)="reload(devices[key])" class="pointer action_button glyphicon glyphicon-repeat"></div>
                                <div i18n-title="@@title.control.fetch_status" title="Fetch status" (click)="fetchStatus(devices[key])" class="pointer action_button glyphicon glyphicon-refresh"></div>
                            </div>
                        </ng-container>
                        <ng-container *ngIf="table.code != 'actions'">
                            {{devices[key][table.code]}}
                        </ng-container>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
